<template>
	<view class="xf-location-map">
		<view class="map-container">
			<map class='map trans' id="maps" :class="[popupClass,showPopup==false?'mapH':'']" :latitude="location.latitude" :longitude="location.longitude" :scale='17'
				:markers="markers" @regionchange="regionChange" @callouttap="jupmDetail">
				<cover-view class="topCount flex jst-center alg-center font12">
					<cover-view class="line24 pL5 pR5 radius10 bgf flex alg-center">
						<cover-view class="line24">全部职位：</cover-view>
						<cover-view class="u-org bold line24">{{tjInfo?.wholeOddJobNum}}</cover-view>
					</cover-view>
					<cover-view class="line24 pL5 pR5 radius10 bgf mL5 mR5 flex alg-center">
						<cover-view class="line24">进行中：</cover-view>
						<cover-view class="u-org bold line24">{{tjInfo?.conductOddJobNum}}</cover-view>
					</cover-view>
					<cover-view class="line24 pL5 pR5 radius10 bgf  flex alg-center">
						<cover-view class="line24">待结算：</cover-view>
						<cover-view class="u-org bold line24">{{tjInfo?.settlementOddJobNum}}</cover-view>
					</cover-view>
				</cover-view>
				<cover-image class="map-marker" src="/static/image/userImg/mark.png" />
				<!-- 自定义窗口 -->
				<!-- #ifdef MP-WEIXIN -->
					<cover-view slot="callout">
						<cover-view class="mapPopup bold" v-for="(item,i) in markers" :key="i" :marker-id="item.id">
							<block v-if="item.data.nearbyPositions > 0" >
								<cover-view class="nearOrder txt-ellipsis t-center  font10 line18 bg-blue1 u-f">附近订单{{ item.data.nearbyPositions }}个</cover-view>
								<cover-view class="content">
									<cover-view class="txt-ellipsis t-center  font12 line18">{{item.data.oddJobName}}</cover-view>
									<cover-view class="font12 u-red t-center txt-ellipsis mT5">{{item.data.salary}}元/天</cover-view>
								</cover-view>
							</block>
							<block v-else>
								<cover-view class="new-content">
									<cover-view class="txt-ellipsis t-center  font12 line18">{{item.data.oddJobName}}</cover-view>
									<cover-view class="font12 u-red t-center txt-ellipsis mT5">{{item.data.salary}}元</cover-view>
								</cover-view>
							</block>
						</cover-view>
					</cover-view>
				<!-- #endif -->
				
				<cover-view class="map-locate" @click="handleLocate">
					<cover-image class="mapImg"  src="@/static/image/gw.png" />
				
				</cover-view>
			</map>
		</view>
		<view class="around-contain">
			<view>
				<view :class="showPopup==false?'fixedHome':''">
					<view class="flex jst-center">
						<view class="pL15 pR15 pT10 pB10" @click="showPopup=!showPopup">
							<u-image :width="44" :height="33" v-if="showPopup" :src="resources.homeDwon" mode=""></u-image>
							<u-image :width="44" :height="33"  v-else :src="resources.homeUp" mode=""></u-image>
						</view>
					</view>
					<view class="flex alg-center pL15 pR15 pB5" @click="chooseLocation">
						<text class="mR5 ellipse font15 u-3 chooseInfo">{{location.address}}</text>
						<u-icon name="arrow-down-fill" :size="32" color="#8d8d8d"></u-icon>
					</view>
				</view>
				<view v-show="showPopup">
					<view class="pL15 pR15 mT5">
						<view class="user-select u-flex-col">
							<u-search disabled placeholder="搜索职位/公司" @click="navigateToSearchPage" v-model="query.oddJobName" height="80" :show-action="false"
								bg-color="#fff" shape="square" @change='search'>
							</u-search>
						</view>
					</view>
					<view class="flex flex-wrap pL15 mB10 mT5">
						<view class="jobTag" @click="changeTab(item,i)" :class="item.checked==true?'active':''"
							v-for="(item,i) in tagLis" :key='item.id'>
							{{item.text}}
						</view>
					</view>
					<mescroll-uni class="lisBox tabBarLisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
						:down="downOption"  :up="upOption" :bottombar="true" :top="770" :wxSelfTabbar="true">
						<view>
							<jobItem :list="list" ></jobItem>
						</view>
					
					</mescroll-uni>
				</view>
				
			</view>
			
		</view>
     <xfCompanyTabbar></xfCompanyTabbar>
	</view>
</template>

<script>
	import {
		getLocalAddress,
		chooseLocal,
		getLocal
	} from "@/libs/map.js"
	import jobItem from "@/components/company/jobItem/index.vue"
	import markerImg from "@/static/image/userImg/circle.png"
	import {
		homeJobLis,
		mapList
	} from '@/api/userInterface/job.js'
	import {getStaticInfo} from "@/api/common.js"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		components: {
			jobItem
		},
		data() {
			return {
				loading: false,
				openPopup: true,
				currentLocal: {},
				tagLis: [],
				query: {
					longitude: null,
					latitude: null,
					oddJobName: '',
					sort: '',
					oddReleaseType: '',
					salaryRange: '',
					settlementWay: '',
					jobNumType: '',
					izTools: '',
					workWay: '',
					oftenFilter: [],
					oddJobType: "",
					pageSize: 10,
					pageNo: 1
				},
				location: {
					address: '',
					longitude: null, // 经度
					latitude: null, // 纬度
				},
				tjInfo:{},
				markers: [],
				nearOrderTotal: 0,
				showPopup: true,
				locateLoading: false,
				list: [],
				popupClass:'',
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true,
						top:"-30rpx"
					},
					textNoMore: "到底啦~",
				},
			};
		},
		onShow() {
			const info = uni.getSystemInfoSync();
			if (info.safeAreaInsets && info.safeAreaInsets.bottom > 0) {
			  this.popupClass='safeBottom'
			} else if (info.screenTop > 0) {
			  this.popupClass='topBottom'
			}
			this.mescroll && this.mescroll.triggerDownScroll()
		},
		onLoad(e) {
			this.getFastNav();
			this.getLocaltion('getAddr')
			this.getStaticInfoApi()
		},
		methods: {
			navigateToSearchPage(){
				uni.navigateTo({
					url: "/pages/common/search/index"
				})
			},
			//获取顶部统计数据
			getStaticInfoApi(){
				getStaticInfo().then(res=>{
					this.tjInfo=res.result;
				})
			},
			changeTab(item, i) {
				this.tagLis[i].checked = !this.tagLis[i].checked;
				if (this.tagLis[i].checked) {
					this.query.oftenFilter.push(item.value)
				} else {
					this.query.oftenFilter = this.query.oftenFilter.filter(v => v != item.value)
				}
				this.list = [];
				this.markers = [];
				this.mescroll.resetUpScroll();
			},
			//收起折叠工作列表
			openPopupJobLis() {
				this.openPopup = !this.openPopup;
			},
			//选择位置信息
			async chooseLocation() {
				let res = await chooseLocal();
				this.location.longitude = res.longitude;
				this.location.latitude = res.latitude;
				this.location.address = res.name;
				this.query.longitude=res.longitude;
				this.query.latitude=res.latitude;
				this.markers = [];
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			// 点击气泡
			jupmDetail(e) {
				let data = this.markers[e.markerId - 1].data;
				uni.navigateTo({
					url: `/pages/companyPage/subpackge/job/grabDetail/index?id=${data.id}`
				})
			},
			getFastNav() {
				this.baseStore.getDictionaryDataAll('jjp_oddjob_fast_search').then(res => {
					this.tagLis = res.map(v => {
						return {
							...v,
							checked: false
						}
					})
				})
			},
			//返回当前位置
			async handleLocate() {
				let res = await getLocal();
				this.location.longitude = res.longitude;
				this.location.latitude = res.latitude;
				this.query.longitude=res.longitude;
				this.query.latitude=res.latitude;
				getLocalAddress(this.location.longitude, this.location.latitude).then(addr => {
					this.location.address = addr.result.formatted_addresses.recommend;
				})
				if (this.location.longitude && this.location.latitude) {
					this.mapContext = uni.createMapContext("maps", this);
					this.mapContext.moveToLocation({
						longitude: res.longitude,
						latitude: res.latitude,
					})
					this.markers = []
					this.list = [];
					this.mescroll.resetUpScroll();
				} else {
					this.$u.toast('获取定位失败')
				}
			},
			regionChange(e) {
				const {detail} = e
				if(detail.centerLocation) {
					this.location.longitude = detail.centerLocation.longitude;
					this.location.latitude = detail.centerLocation.latitude;
					this.query.longitude = detail.centerLocation.longitude;
					this.query.latitude = detail.centerLocation.latitude;
					getLocalAddress(this.location.longitude, this.location.latitude).then(addr => {
						this.location.address = addr.result.formatted_addresses.recommend;
						this.mapListApi()
					})
				}				
			},
			async getLocaltion(e) {
				const {lat,lon} = await this.xf.getLatOrLon()
				this.location.longitude=lon;
				this.location.latitude=lat;
				getLocalAddress(this.location.longitude, this.location.latitude).then(addr => {
					this.location.address = addr.result.formatted_addresses.recommend;
				})
			},
			mapListApi(){
				mapList({
					latitude: this.query.latitude,
					longitude: this.query.longitude
				}).then(mapListRes=>{
					const mapList = mapListRes.result
					if(!mapList.length) return
					this.markers = mapList.map((item,index)=>{
						return {
							id: index + 1,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: markerImg,
							width: '30rpx',
							height: '30rpx',
							data: {
								id: item.id,
								oddJobName: item.oddJobName,
								salary: item.salary,
								isPerson: item.oddReleaseType,
								nearbyPositions: item.nearbyPositions
							},
							customCallout: {
								anchorY: 0, // Y轴偏移量
								anchorX: 0, // X轴偏移量
								color: '#333',
								display: "ALWAYS"
							}

						}
					})
				})
			},
			async upCallback(page) {
				if(!this.query.latitude&&!this.query.longitude){
					const {lat,lon} = await this.xf.getLatOrLon();
					this.query.latitude=lat;
					this.query.longitude=lon;
				}
				
				if (page.num == 1) {
					this.list = [];
					this.markers = [];
				};
				this.query.pageNo = page.num;
				homeJobLis(this.query).then(res => {
					let point = res.result.records
					if (point && point.length > 0) {
						let list = point;
						this.list = this.list.concat(list);
						this.mescroll.endSuccess(point.length);
						this.mapListApi()
					} else {
						this.mescroll.endSuccess(point.length);
					}
				}).catch((err) => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endErr();
				})


			},

			search() {

				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.markers = [];
					this.mescroll.resetUpScroll();
				}, 500)
			},
			bmOpt() {
				let token = uni.getStorageInfoSync('token')
				if (token) {
					uni.navigateTo({
						url: "/pages/userPage/subpackge/oddJob/jobNeed/jobNeed"
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.topCount{
		position: absolute;
		width: 100%;
		left: 0;
		top:20rpx;
	}
	.line {
		width: 64rpx;
		height: 8rpx;
		background: #CDCED3;
		border-radius: 4rpx;
	}
	.trans {
		transition: all 0.3s ease-in-out;
	}
	.mapImg{
		width: 111rpx;
		height: 111rpx;
	}
	.ygxqBox{
		width: 60rpx;
		// height:80rpx;
		border-radius: 20rpx;
		padding:10rpx 20rpx;
	}
	.mapPopup {
		width: 170rpx;
		font-size: 24rpx;
		.nearOrder{
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			height: 60rpx;
			top: 30rpx;
			z-index: 10;
			width: 100%;
		}
		.content{
			position: relative;
			z-index: 20;
			padding: 10rpx;
			bottom: 20rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background: #FFFFFF;
		}
		.new-content {
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			background: #FFFFFF;
			z-index: 20;
			padding: 10rpx;
		}
	}

	.map-container {
		position: relative;
		z-index: 1;

		.map {
			width: 100%;
			height: 540rpx;
			&.mapH {
				/* #ifdef MP-WEIXIN */
				  height: calc(100vh - 140rpx);
				  &.safeBottom{
					   height: calc(100vh - 228rpx);
				  }
				/* #endif */
				/* #ifdef H5 */
				 height: calc(100vh - 120rpx);
				/* #endif */
			   
			}
		}

		.map-marker {
			width: 38rpx;
			height: 54rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, calc(-50% - 60rpx));
			z-index: 9999;
		}

		.map-locate {
			position: absolute;
			bottom: 80rpx;
			right: 4rpx;
			padding: 4px;
			z-index: 999;

			.imgMap {
				width: 60rpx;
				height: 60rpx;
				margin-top: 20rpx;
				border-radius: 50%;
			}
		}
	}

	.downImg {
		width: 20rpx;
		height: 10rpx;
	}

	.around-contain {
		background-color: #EAF2FD;
		border-radius: 60rpx 60rpx 0 0;
		margin-top: -60rpx;
		position: relative;
		z-index: 10;
		.fixedHome{
			padding-bottom: 40rpx;
		}
		.jobTag {
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #8D8D8D;
			width: 152rpx;
			height: 54rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-right: 27rpx;
			line-height: 54rpx;
			text-align: center;
			border: 2rpx solid #fff;

			&:last-child {
				margin-right: 0;
			}

			&.active {
				color: #3291F8;
				border: 2rpx solid #3291F8;
			}
		}
	}
</style>